<!--
 * @Author: daidai
 * @Date: 2022-03-01 09:43:37
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-09 11:40:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-bottom.vue
-->
<template>

  <Echart
      ref="echart"
      :options="option"
      id="bottomLeftChart"
      style="width: 100%;height: 100%;"
      v-if="pageflag"
  ></Echart>
  <Reacquire v-else @onclick="getData" style="line-height: 200px"/>
</template>

<script>
import {currentGET} from "api";
// import vueSeamlessScroll from "vue-seamless-scroll"; // vue2引入方式
// import Kong from "../../components/kong.vue";


import * as echarts from 'echarts/core';
import {
  DatasetComponent,
  TooltipComponent,
  VisualMapComponent
} from 'echarts/components';
import {CustomChart} from 'echarts/charts';
import {CanvasRenderer} from 'echarts/renderers';

echarts.use([
  DatasetComponent,
  TooltipComponent,
  VisualMapComponent,
  CustomChart,
  CanvasRenderer
]);
import * as d3 from 'd3';


export default {
  // components: { vueSeamlessScroll, Kong },
  data() {
    return {
      list: [],
      pageflag: true,

      // components: vueSeamlessScroll,
      // defaultOption: {
      //   ...this.$store.state.setting.defaultOption,
      //   singleHeight: 240,
      //   limitMoveNum: 5,
      //   step: 0,
      // },
      option: {},
      copyData: [],
      seriesData: []
    };
  },
  watch: {
    seriesData: {
      handler(newValue) {
        // 在 seriesData 发生变化时更新图表数据
        this.option.dataset.source = newValue;
      },
      deep: true // 监听对象或数组的变化
    }
  },
  created() {
    this.getData(); // 组件创建时获取数据
  },
  mounted() {
  },
  methods: {
    getData() {
      //直接在这之后写网络请求
      currentGET("MA", {}).then((res) => {

        if (res.code == 200) {
          console.log("旁边底部成功1", res.data);
          this.pageflag = true;
          this.initData(res.data);
        } else {
          this.$Message.warning('code = ', res.code);
        }


      });
    },
    initData(seriesData) {
      let displayRoot = stratify1();

      function stratify1() {
        return d3.stratify()
            .parentId(function (d) {

              return d.id.substring(0, d.id.lastIndexOf('.'));
            })(seriesData)
            .sum(function (d) {

              return d.value || 0;
            })
            .sort(function (a, b) {
              return b.value - a.value;
            });
      }

      function overallLayout(params, api) {

        let context = params.context;
        d3.pack().size([api.getWidth() - 2, api.getHeight() - 2])
            .padding(0)(displayRoot);
        context.nodes = {};
        displayRoot.descendants().forEach(function (node) {
          context.nodes[node.id] = node;
        });
      }

      function renderItem(params, api) {
        let context = params.context;
        let idx = params.dataIndex;
        // Only do that layout once in each time `setOption` called.
        // 每次调用“setOption”时，只能进行一次布局。
        if (!context.layout) {
          context.layout = true;

          overallLayout(params, api);
        }

        let nodePath = api.value('id');
        if (!nodePath) {
          // 处理 nodePath 为 null 或 undefined 的情况
          return;
        }
        let nodeName = nodePath
            .slice(nodePath.lastIndexOf('.') + 1)
            .split(/(?=[A-Z][^A-Z])/g)
            .join('')
        let node = context.nodes[nodePath];
        if (!node) {
          // 处理 node 为 null 或 undefined 的情况
          return;
        }
        if (node.id === '中国') {
          node.r = 0
        }
        if (!node) {
          // Reder nothing.
          return;
        }
        let colorList = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#eacccc'];
        let z2 = api.value('depth') * 2;
        if (idx === 0) {
          return {
            type: 'rect', // 修改形状为方形
            shape: {
              x: node.x - node.r, // 修改方形的位置
              y: node.y - node.r,
              width: node.r * 2, // 方形的宽度和高度为直径的两倍
              height: node.r * 2
            },
            // transition: ['shape'],
            z2: z2,
            textContent: {
              type: 'text',
              style: {
                // transition: isLeaf ? 'fontSize' : null,
                text: nodeName,
                fill: '#fff',
                fontFamily: 'Arial',
                width: node.r * 1.3,
                overflow: 'truncate',
                fontSize: node.r / 3
              },
              emphasis: {
                style: {
                  overflow: null,
                  fontSize: Math.max(node.r / 3, 12)
                }
              }
            },
            textConfig: {
              position: 'inside'
            },
            style: {
              fill: colorList[idx % colorList.length]
            },
            emphasis: {
              style: {
                fontFamily: 'Arial',
                fontSize: 12,
                shadowBlur: 20,
                shadowOffsetX: 3,
                shadowOffsetY: 5,
                shadowColor: 'rgba(0,0,0,0.3)'
              }
            }
          };
        } else {
          return {
            type: 'circle',
            shape: {
              cx: node.x,
              cy: node.y,
              r: node.r
            },
            // transition: ['shape'],
            z2: z2,
            textContent: {
              type: 'text',
              style: {
                // transition: isLeaf ? 'fontSize' : null,
                text: nodeName,
                fill: '#fff',
                fontFamily: 'Arial',
                width: node.r * 1.3,
                overflow: 'truncate',
                fontSize: node.r / 3
              },
              emphasis: {
                style: {
                  overflow: null,
                  fontSize: Math.max(node.r / 3, 12)
                }
              }
            },
            textConfig: {
              position: 'inside'
            },
            style: {
              fill: colorList[idx % colorList.length]
            },
            emphasis: {
              style: {
                fontFamily: 'Arial',
                fontSize: 12,
                shadowBlur: 20,
                shadowOffsetX: 3,
                shadowOffsetY: 5,
                shadowColor: 'rgba(0,0,0,0.3)'
              }
            }
          };
        }
      }

      this.option = {
        dataset: {
          source: seriesData,
        },
        tooltip: {
          show: true,
          formatter: function (params) {
            // console.log('params', params)
            return params.marker + params.name + ':           ' + params.data.value + '个'
          }
        },
        hoverLayerThreshold: Infinity,
        series: [{
          type: 'custom',
          colorBy: 'data',
          renderItem: renderItem,
          progressive: 0,
          coordinateSystem: 'none',
          encode: {
            tooltip: 'value',
            itemName: 'id'
          }
        }]
      }
    }
  }
}

</script>

<style lang='scss' scoped>
.left_boottom_wrap {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.doudong {
  //  vertical-align:middle;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

.left_boottom {
  width: 100%;
  height: 100%;

  .left_boottom_item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    font-size: 14px;
    margin: 10px 0;

    .orderNum {
      margin: 0 16px 0 -20px;
    }

    .info {
      margin-right: 10px;
      display: flex;
      align-items: center;
      color: #fff;

      .labels {
        flex-shrink: 0;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
      }

      .zhuyao {
        color: $primary-color;
        font-size: 15px;
      }

      .ciyao {
        color: rgba(255, 255, 255, 0.8);
      }

      .warning {
        color: #e6a23c;
        font-size: 15px;
      }
    }

    .inner_right {
      position: relative;
      height: 100%;
      width: 380px;
      flex-shrink: 0;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;

      .dibu {
        position: absolute;
        height: 2px;
        width: 104%;
        background-image: url("../../assets/img/zuo_xuxian.png");
        bottom: -10px;
        left: -2%;
        background-size: cover;
      }

      .addresswrap {
        width: 100%;
        display: flex;
        margin-top: 8px;
      }
    }

    .wangguan {
      color: #1890ff;
      font-weight: 900;
      font-size: 15px;
      width: 80px;
      flex-shrink: 0;
    }


    .time {
      font-size: 12px;
      // color: rgba(211, 210, 210,.8);
      color: #fff;
    }

    .address {
      font-size: 12px;
      cursor: pointer;
      // @include text-overflow(1);
    }

    .types {
      width: 30px;
      flex-shrink: 0;
    }

    .typeRed {
      color: #fc1a1a;
    }

    .typeGreen {
      color: #29fc29;
    }
  }
}
</style>
